<template>
  <div class="app-container">
    <div class="centerContent">
      <!-- <div class="item">
        <div class="box1" @click="handleTurnOver">
          <img src="@/assets/images/24gf-box.png" alt="" />
          <div class="text">查询周转箱任务</div>
        </div>
        <div class="box2" @click="handleAbnormal">
          <img src="@/assets/images/error.png" alt="" />
          <div class="text">查询异常差异处理</div>
        </div>
        <div class="box3" @click="handleCanvasNew">
          <img src="@/assets/images/turnover.png" alt="" />
          <div class="text">查询周转箱位置</div>
        </div>
        <div class="box4" @click="handleInVentory">
          <img src="@/assets/images/inventorykc.png" alt="" />
          <div class="text">库存余量</div>
        </div>
      </div> -->
      <!-- <div class="item">
        <div class="boxRow1">
          <img src="@/assets/images/more.png" alt="" />
          <div class="text">更多功能</div>
        </div>
        <div class="boxRow2" @click="handleOutbound">
          <img src="@/assets/images/Deliveryck.png" alt="" />
          <div class="text">出库指令报表</div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods:{
    handleAbnormal(){
        this.$router.push('/abNormal');
    },
    handleTurnOver(){
        this.$router.push('/turnOver');
    },
    handleCanvasNew(){
        this.$router.push('/CanvasNew');
    },
    handleInVentory(){
        this.$router.push('/InVentory');
    },
    handleOutbound(){
        this.$router.push('/Outbound');
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  padding: 0 !important;
  width: 100%;
  height: 100%;
  background: url("../assets/images/backgroundhc.png") no-repeat;
  .centerContent {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .item {
    display: flex;
    justify-content: flex-start;
    font-size: 12px;
    margin-bottom: 5px;
    .box1 {
      width: 200px;
      height: 200px;
      background: #f19066e1;
      border-radius: 3px;
      margin-right: 5px;
      //   line-height: 300px;
      //   text-align: center;
      color: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      img {
        margin-top: 40px;
        width: 50%;
      }
      .text {
        height: 20px;
      }
    }
    .box2 {
      width: 200px;
      height: 200px;
      background: #f7d894dc;
      border-radius: 3px;
      margin-right: 5px;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #ffffff;
      cursor: pointer;
      img {
        margin-top: 40px;
        width: 44%;
      }
      .text {
        margin-top: 13px;
        height: 20px;
      }
    }
    .box3 {
      width: 400px;
      height: 200px;
      background: #778aebde;
      border-radius: 3px;
      margin-right: 5px;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #ffffff;
      cursor: pointer;
      img {
        margin-top: 40px;
        width: 25%;
      }
      .text {
        height: 20px;
      }
    }
    .box4 {
      width: 200px;
      height: 200px;
      background: #e77f67e1;
      border-radius: 3px;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #ffffff;
      cursor: pointer;
      img {
        margin-top: 40px;
        width: 45%;
      }
      .text {
        margin-top: 8px;
        height: 20px;
      }
    }
    .boxRow1 {
      width: 400px;
      height: 200px;
      border-radius: 3px;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #6a89cce0;
      margin-right: 5px;
      color: #ffffff;
      cursor: pointer;
      img {
        margin-top: 40px;
        width: 25%;
      }
      .text {
        margin-top: 8px;
        height: 20px;
      }
    }
    .boxRow2 {
      width: 200px;
      height: 200px;
      border-radius: 3px;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #82ccdde3;
      color: #ffffff;
      cursor: pointer;
      img {
        margin-top: 40px;
        width: 50%;
      }
      .text {
        margin-top: 8px;
        height: 20px;
      }
    }
  }
}
</style>
